<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局模板</title>
    <style>
        body{
            display: flex;
            width: 100%;
            justify-content: space-around;
            flex-wrap: wrap;
           /* flex-direction: column;*/
           align-content: center;
         }
        .krest{
            width: 400px;
            height: 400px;
            background-color: rgb(158, 64, 240);
            margin-right: 5px;
            /*flex: 1;*/
            margin-bottom: 10px;
        }
        .krest section{
            display: flex;  
            flex-direction: column; 
            text-align: center;
        }
        .krest section .cctv:nth-of-type(1){  
        height: 50px;  
        background-color: rgb(235, 167, 172);  
    }  
    .krest section .cctv:nth-of-type(2){  
        background-color: rgb(211, 226, 114);  
        margin-top: 10px;  
        margin-bottom: 10px;  
        height: 280px;
        width: 100%;
    }  
    .krest section .cctv:nth-of-type(3){  
        height: 50px;  
        background-color: rgb(113, 225, 165);  
    }  
    .krest:nth-of-type(2) .cctv:nth-of-type(2) {  
            display: flex; 
            justify-content: space-between; /* 在子元素之间添加空隙 */  
        }  
  
        .krest:nth-of-type(2) .cctv:nth-of-type(2) > div {  
            flex: 1; /* 使每个子元素等宽 */  
            background-color: rgb(170, 173, 174);  
            margin: 5px; 
            text-align: center; 
            padding: 10px 0; 
            
        }  
        .krest:nth-of-type(3) .world-container {  
    display: flex;  
}  
   
.krest:nth-of-type(3) .world-part {  
    flex-grow: 1; /* 两边的宽度 */  
    background-color: rgb(170, 173, 174);  
    margin: 5px;  
    text-align: center;  
    padding: 10px 0;  
}  
  
.krest:nth-of-type(3) .world-double {  
    flex-grow: 8; /* 中间部分的宽度是两边的两倍 */  
    background-color: rgb(170, 173, 174); 
    margin: 5px;  
    text-align: center;  
    padding: 10px 0;  
}
.ufc{
    display: flex;
    height: 400px;
    width: 400px;
}
.ufc span:nth-child(1){
    width: 100px;
    height: 400px;
    background-color: rgb(153, 153, 156);
    margin-right: 10px;
}
.ufc span:nth-child(2){
flex: 1;
    background-color: rgb(153, 153, 156);
}
    </style>
</head>
<body>
    <div class="krest">
        <section>
        <div class="cctv">head</div>
        <div class="cctv">world</div>
        <div class="cctv">footer</div>
    </section>
    </div>
    <div class="krest">  
        <section>  
            <div class="cctv">head</div>  
            <div class="cctv">  
                <div>world part 1</div>  
                <div>world part 2</div>  
                <div>world part 3</div>  
            </div>  
            <div class="cctv">footer</div>  
        </section>  
    </div>  
    <div class="krest">  
        <section>  
            <div class="cctv">head</div>  
            <div class="cctv world-container">  
                <div class="world-part">world part 1</div>  
                <div class="world-part world-double">world part 2 </div>  
                <div class="world-part">world part 3</div>  
            </div>  
            <div class="cctv">footer</div>  
        </section>  
    </div>
    <div class="krest">
        <div class="ufc">
            <span>导航</span>
            <span>主要内容</span>
        </div>
    </div>
</body>
</html>